<template>
	<view>
		<navbar title="立即支付"></navbar>
		<view class="pay-wrapper">
			<view class="title">支付方式</view>
			<view class="pay-box">
				<view class="pay-list fa jcsb" @click="payType = 1">
					<view class="fa">
						<image class="pay-icon" src="../../static/balancepay.png" mode=""></image>
						<view>余额支付</view>
					</view>
					<image class="pick-icon" src="../../static/pick-fill.png" mode="" v-if="payType == 1"></image>
					<image class="pick-icon" src="../../static/pick.png" mode="" v-else></image>
				</view>
				<view class="pay-list fa jcsb" @click="payType = 0">
					<view class="fa">
						<image class="pay-icon" src="../../static/wxpay.png" mode=""></image>
						<view>微信支付</view>
					</view>
					<image class="pick-icon" src="../../static/pick-fill.png" mode="" v-if="payType == 0"></image>
					<image class="pick-icon" src="../../static/pick.png" mode="" v-else></image>
				</view>
			</view>
		</view>
		<view class="fixed-bottombar">
			<view class="bottombar-box fa jcsb">
				<view class="amount fa">
					<view>合计：</view>
					<view class="money fa">
						<view class="rmb">￥</view>
						<view>{{totalAmount}}</view>
					</view>
				</view>
				<view class="confirmbtn fa jcc" @click="payOrder">支付</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payType: 0,
				id: '',
				totalAmount: '',
				ordersNo: '',
				lock: true
			};
		},
		onLoad(options) {
			if(options.id) {
				this.id = options.id
			}
			if(options.money) {
				this.totalAmount = options.money
			}
			if(options.ordersNo) {
				this.ordersNo = options.ordersNo
			}
		},
		methods: {
			payOrder() {
				if(!this.lock) return false
				this.lock = false
				uni.showLoading({
					title: '加载中'
				})
				this.api.miniAppPayFunc({
					payType: this.payType,
					ordersNo: this.ordersNo
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						if(this.payType) {
							uni.showToast({
								title: '支付成功'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}else {
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								paySign: res.data.paySign,
								signType: res.data.signType,
								timeStamp: res.data.timeStamp,
								success: res2 => {
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								},
								fail: err => {
									console.log(err)
									this.lock = true
								}
							})
						}
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.lock = true
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
					this.lock = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-wrapper{
		margin: 20rpx 24rpx 0;
		padding: 20rpx;
		border-radius: 16rpx;
		font-size: 26rpx;
		background-color: #fff;
		.pay-box{
			padding-top: 6rpx;
			.pay-list{
				margin-top: 36rpx;
				.pay-icon{
					margin-right: 20rpx;
					width: 48rpx;
					height: 48rpx;
				}
				.pick-icon{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			z-index: 88;
			position: fixed;
			bottom: 0;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 24rpx;
			height: 100rpx;
			background-color: #fff;
			box-shadow: inset 0 2rpx 0 0 #E6E6E6;
			.amount{
				.money{
					font-size: 30rpx;
					font-weight: bold;
					color: #FE2525;
					.rmb{
						font-size: 24rpx;
					}
				}
			}
			.confirmbtn{
				width: 230rpx;
				height: 68rpx;
				border-radius: 34rpx;
				color: #fff;
				background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
			}
		}
		.fixed-place{
			height: 100rpx;
		}
	}
</style>
